<template>
	<el-container class="vue-container">
		<!-- header -->
		<el-header class="vue-header">
			<Header :user="user" />
		</el-header>

		<el-container>
			<!-- 侧边栏 -->
			<el-aside :style="{
				width: this.$VuexStore.state.collapse ? '65px' : '200px',
			}" class="vue-sidebar">
				<SideBar :menus="menus" />
			</el-aside>

			<el-container>
				<!-- 内容区域 -->
				<el-main>
					<BreadCrumb />
					<router-view />
				</el-main>

				<!-- 底部 -->
				<el-footer class="vue-footer" height="40px;">
					<Footer :webSiteInfo="webSiteInfo" />
				</el-footer>

			</el-container>
		</el-container>
	</el-container>
</template>

<script>
import Header from "./fragments/Header.vue";
import SideBar from "./fragments/SideBar.vue";
import Footer from "./fragments/Footer.vue";
import BreadCrumb from "./fragments/BreadCrumb.vue";

export default {
	name: "Layout",
	components: {
		Header,
		SideBar,
		Footer,
		BreadCrumb
	},
	data() {
		return {
			user: this.$TestData.user,
			menus: this.$TestData.navigationData,
			webSiteInfo: this.$TestData.webSiteInfo,
		};
	},
	methods: {
		// 初始化 user 信息
		initUser: function () {
			var tokenObject = this.$Storage.getItemForLs(this.$TestData.TOKEN_OBJECT_KEY);
			this.$Request
				.fetch("/api/rentuser/user/" + tokenObject.aud, {})
				.then((result) => {
					this.user = result;
					//console.log(result);
					// 设置默认头像
					//console.log(this.user.userImage);
					if (this.user.userImage == null || this.user.userImage == '') {
						this.user.userImage = "/img/default_big.jpg";
					}
					if (!this.user.userImage.includes("/img/default_big.jpg")) {

						this.user.userImage = "http://127.0.0.1:8000" + this.user.userImage;
					}
				//	console.log(this.user);
					// 清除密码
					this.user.password = "";
				})
				.catch(() => { });
		},
		// 初始化菜单信息
		initMenus: function () {
		},
		// 接受子组件 User 数据，进行修改
		receiveUserData: function (user, type) {

			// var self = this;
			// if (type == 0) {
			// 	this.$Request
			// 		.fetch_("/api/rentuser/user", "put", user)
			// 		.then((result) => {
			// 			if (result.status == this.$Request.OK_CODE) {
			// 				this.$message({
			// 					message: "修改成功。",
			// 					type: "success",
			// 					duration: 2 * 1000,
			// 				});
			// 				self.user = result.data;
			// 			} else {
			// 				this.$message.error(result.message);
			// 			}
			// 		})
			// 		.catch(() => { });
			// } else if (type == 1) {
			// 	this.$Request
			// 		.fetch_("/api/rentuser/password", "post", user)
			// 		.then((result) => {
			// 			if (result.status == this.$Request.OK_CODE) {
			// 				this.$VuexStore.commit("setToken", "");
			// 				this.$router.push("/login");
			// 			} else {
			// 				this.$message.error(result.message);
			// 			}
			// 		})
			// 		.catch(() => { });
			// }
		},
	},
	mounted: function () {
		this.initUser();
		this.initMenus();
	},
};
</script>

<style scoped>
.el-header,
.el-footer {
	background-color: #b3c0d1;
	color: #333;
	text-align: center;
	line-height: 60px;
}

.el-aside {
	background-color: #d3dce6;
	color: #333;
	text-align: center;
	line-height: 200px;
}

.el-main {
	background-color: #e9eef3;
	color: #333;
	/* text-align: center; */
	/* line-height: 160px; */
}

body>.el-container {
	margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
	line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
	line-height: 320px;
}

/* ======== 自定义 ======== */
.vue-container {
	/* font-family: "monaco";
	font-size: 13px; */
	position: absolute;
	width: 100%;
	top: 0px;
	left: 0;
	bottom: 0;
}

.vue-header {
	padding: 0;
	z-index: 1000;
}

.vue-footer {
	line-height: 40px;
	background: #dcddd8;
	display: block;
	float: right;
}
</style>

